/**
 * 一个组合式函数，
 *  推荐使用 use 开头
 */
import { ref } from 'vue'

// 引入 useEventListener
import useEventListener from './useEventListener'

export default function useMouse() {
  const x = ref(0)
  const y = ref(0)

  function handle(e) {
    console.log('handle')
    x.value = e.pageX
    y.value = e.pageY
  }

  // onMounted(() => {
  //   // 添加全局的 mousemove 的事件监听
  //   window.addEventListener('mousemove', handle)
  // })

  // onUnmounted(() => {
  //   // 移除全局的 mousemove 的事件监听
  //   window.removeEventListener('mousemove', handle)
  // })

  // 实现了一个 useEventListener hook 上面的代码也可以直接调用 useEventListener
  useEventListener(window, 'mousemove', handle)

  return {
    x,
    y,
  }
}
